<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>添加文件信息界面</title>
		<link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
		
		<style>
			.box{
				display:flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: 100vm;
				height:100vh;
				background: #FFFFFF;
			}
			.box .layui-form{
				width:50%;
				border:1px solid #c9c9c9;
				box-shadow: 2px 2px #fff;
				border-radius: 5px;
				padding: 10px;
			}
			.img-list{
				width: 100%;
				padding: 10px;
			}
			.img-list img{
				display: inline-block;
				width: 100px;
				height: 100px;
				margin-right: 15px;
			}
		</style>
	</head>
<body>
	<div class="box">
		<form class="layui-form" action="javascript: void(0)"  lay-filter="fileForm">
		  <div class="layui-form-item">
		    <label class="layui-form-label">文件标题:</label>
		    <div class="layui-input-block">
		      <input type="text" name="title"  placeholder="请输入文件标题:" class="layui-input" lay-verify="required" lay-reqtext="文件标题不能为空？">
		    </div>
		  </div>
		 
		  <div class="layui-form-item">
		    <label class="layui-form-label">文件文号:</label>
		    <div class="layui-input-block">
		      <input type="text" name="fileCode"  placeholder="请输入文件文号:" class="layui-input" lay-verify="required" lay-reqtext="文件文号不能为空？">
		    </div>
		  </div>
		  
		  
		  <div class="layui-form-item">
		    <label class="layui-form-label">文件类型:</label>
		    <div class="layui-input-block">
		      <select name="fileType" lay-filter="wjlx" >
		        <option value=""></option>
		        <option value="政务">政务</option>
		        <option value="环保">环保</option>
		        <option value="教学">教学</option>
		        <option value="党务">党务</option>
		        <option value="会议">会议</option>
		      </select>
		    </div>
		  </div>
		  
		   <div class="layui-form-item">
		       <label class="layui-form-label">保密性:</label>
		       <div class="layui-input-block">
		         <input type="radio" name="security" value="0" checked="">
		         <input type="radio" name="security" value="1" >
		       </div>
		     </div>
		 
		  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">要求内容:</label>
		    <div class="layui-input-block">
		      <textarea placeholder="请输入内容:" class="layui-textarea" name="content"></textarea>
		    </div>
		  </div>
		  
		  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">备注:</label>
		    <div class="layui-input-block">
		      <textarea placeholder="备注:" class="layui-textarea" name="memo"></textarea>
		    </div>
		  </div>
		  
		  <div class="layui-form-item layui-form-text">
		    <label class="layui-form-label">上传附件:</label>
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn"  id="uploadImg" >
		        <i class="layui-icon">&#xe67c;</i>上传图片
		      </button>
			  <div class="img-list">
				  
			  </div>
		    </div>
		  </div>
		  <!--隐藏域-->
		  <input type="hidden" name="filepath" class="hidden"/>
		   <input type="hidden" name="id" />
		    <input type="hidden" name="version"/>
			
		 <div class="layui-form-item">
		     <div class="layui-input-block">
		       <button type="submit" class="layui-btn" lay-submit  lay-filter="formDemo">立即提交</button>
		       <button type="reset" class="layui-btn layui-btn-primary">重置</button>
		     </div>
		   </div>
		</form>
	</div>
		<script src="https://lib.baomitu.com/jquery/3.0.0/jquery.js"></script>
		<script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>
		<script type="text/javascript">
			//载入事件
			layui.use(['upload','form'],()=>{
				//文件上传
				const upload=layui.upload
				const form=layui.form
				upload.render({
					elem:"#uploadImg",
					url:"http://122.225.55.70:2666/logFiles/upload",//文件上传接口地址
					done(res){
						console.log(res);
						if(res.code=='0'){
							const url=res.data.uploadPath
							const img=$(`<img src= http://122.225.55.70:2666/upload/${url} />`)
							$(".img-list").append(img)
							let urls=$(".hidden").val()
							urls+=url+","
							$(".hidden").val(urls)//把路径传到隐藏域中
						}
					}
				})
				//绑定提交事件
				form.on('submit(formDemo)',(obj) => {
					//获取表单内所有数据
					console.log(obj.field)
					const type=localStorage.getItem('type')
					let method='POST'
					if(type==2){
						//做修改
						method='PUT'
					}
					//发送添加请求
					$.ajax({
						type:method,
						url:"http://122.225.55.70:2666/fileManager/town/",
						data:obj.field,
						dataJson:"json",
						success(res){
							if(res.code=='0'){
								alert(res.message)
								if(type==2){
									//修改就关闭窗体
									layer.close()
									parent.location.reload()
								}else{
									location.href="fileManage.html"
								}
							}
						}
					})
				})
					//初始化函数
					let init=()=>{
						//取出id和type
						const id =localStorage.getItem('id')
						const type=localStorage.getItem('type')
						if(type==2){//进行修改操作
							$.ajax({
								type:'GET',
								url:`http://122.225.55.70:2666/fileManager/town/${id}`,//根据id进行查询
								success(res){
									console.log(res)
									form.val('fileForm',{
										title:res.data.title,
										fileCode:res.data.fileCode,
										fileType:res.data.fileType,
										security:res.data.security,
										content:res.data.content,
										memo:res.data.memo,
										filepath:res.data.filepath,
										id:res.data.id,
										version:res.data.version
									})
									
									let imgList=[]
									if(res.data.filepath!==''&& res.data.filepath!==null && res.data.filepath!==undefined){
										//由于有逗号先截取在切割
										const str=res.data.filepath.substring(0,res.data.filepath.length-1)
										//以逗号为间隔进行切割
										imgList =str.split(',')
									}
									
									imgList.forEach((item)=>{
										const img =$(`<img src= http://122.225.55.70:2666/upload/${item}>`) 
										$('.img-list').append(img)
									})
								}
							})
						}
					}
					//调用初始化函数
					init()
			})
			
		</script>
	</body>
</html>
